/* author:GY
date:2022-2-15
describe: tree插件，父节点有三种状态，不选，选中自身，选中自身极其下线
doc: 
 var arrs = [];
 $(".tree").tree(data, arrs);
   var data = [{
    "name": "Root",
    "open": true,
    "cascade": true,
    "checked": false,
    "children": [
      {
        "name": "Agent",
        "open": false,
        "checked": false,
        "children": [{
          "id": 34,
          "name": "Member1",
          "checked": true,
          "open": true,
          "children": []
        },
        {
          "id": 35,
          "name": "Member2",
          "checked": false,
          "open": true,
          "children": []
        }
        ]
      }
    ]
  }];

  tree是插件的容器 data为tree数据、arrs为选中的id可为空
  arrs可填可不填 填写需为数组
  data数据中的只有name、id、checked、open、、children和cascade
    其中open为是否展开	
    cascade为是否子父级联选中（cascade 必须在最高父级中写才生效）
*/
((global) => {
  //添加的dom方法   $().xxx 或 leg().xxx
  $.fn.extend({
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      for (var i = 0; i < 8; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x30), 1);
      }
      var uuid = s.join("");
      return uuid;
    },
    tree(data, arrs) {
      var tree = this;

      $(tree).on("click", ".isShow", function () {
        let that = this;
        isShow(that);
      })

      function isShow(that) {
        //:visible 判断当前元素是否可见。
        if ($(that).parent().find("ul").is(":visible")) {
          $(that).parent().find("ul").hide();
          $(that).attr("style", 'transform:rotate(-90deg)');
        } else {
          if ($(that).parent().find("ul").length > 0) {
            $(that).attr("style", 'transform:rotate(0deg)');
          } else {
            $(that).attr("style", 'opacity: 0;');
          }
          $(that).parent().find("ul").show();
        }
      }
      //判断父级选中状态
      function checkParent(param) {
        var temp = $(param).parent().parent().find("input");
        var selectChecked = [],//选中的子id
          allChecked = [];//当前父级下的所有id
        var checkbox = $(param).parent().parent().prev().prev().prev().prev();
        $.each(temp, function (index, item) {
          allChecked.push(item.id);
          if (item.checked) {
            selectChecked.push(item.id);
          }
        });
        if (allChecked.length == selectChecked.length && selectChecked.length > 0) {//全选
          checkbox.removeClass("select-part").prop("checked", 'true');
        } else if (selectChecked.length == 0) {//全不选
          checkbox.removeClass("select-part").removeAttr("checked");
        } else {//部分选
          checkbox.addClass("select-part").prop("checked", 'true');
        }
        if (checkbox[0] != undefined) {
          checkParent(checkbox[0])
        }
        return;
      }

      //判断子级选中状态
      function checkChildren(param) {
        if (param.checked) {
          $(param).next().next().next().next().children().find("input").prop("checked", 'true').removeClass("select-part");
        } else {
          $(param).next().next().next().next().children().find("input").removeAttr("checked");
        }
      }

      $(tree).on("click", "input", function () {
        var hasChild = $(this).siblings().length == 5;
        if (hasChild) {
          if ($(this).hasClass("select-part")) {
            $(this).removeClass("select-part").prop("checked", 'true');
          } else if (this.checked) {
            $(this).addClass("select-part");
          } else {
            $(this).removeClass("select-part");
          }
        }
        //先子级在父级避免出错（父级里面有判断子级是否选中的）
        if (data[0].cascade && !$(this).hasClass("select-part")) {
          checkChildren(this);
          checkParent(this);
        }
      })

      //使点击a标签等同于点击 input
      $(tree).on("click", "a", function () {
        var hasChild = $(this).siblings().length == 5;
        var input = $(this).prev().prev().prev();
        if (hasChild) {
          if (input.hasClass("select-part")) {
            input.removeClass("select-part").prop("checked", 'true');
          } else if (input[0].checked) {
            input.removeClass("select-part").removeAttr("checked");
          } else {
            input.addClass("select-part").prop("checked", 'true');
          }
        }

        //判断是否为子父级联
        if (data[0].cascade && !input.hasClass("select-part")) {
          checkChildren(input[0]);
          checkParent(input[0]);
        }
      })

      //id相等就选中
      const insert = (children, arr) => {
        for (var a in arr) {
          if (children.id == arr[a]) {
            children.checked = true
          }
        }
      }

      //设置tree节点是否选中
      function setCheckedNodes(data, arrs) {
        for (let x in data) {
          let children = data[x].children;
          if (children != null) {
            for (let y in children) {
              insert(children[y], arrs)
              setCheckedNodes(children, arrs);
            }
          } else {
            return;
          }
        }

      }

      var minusImg = "";
      //递归
      var ids = 0;
      var uuid = $(this).uuid();
      function createTree(data) {
        var str = '<ul>';
        for (var i = 0; i < data.length; i++) {
          ids++;
          str +=
            '<li><img class="isShow" src=' + minusImg + ' />'
          if (data[i].checked == true) {
            str += '<input id="' + uuid + ids + '" type="checkbox" checked ' +
              'data-show="' + data[i].open + '" value="' + data[i].id + '"/>'
          } else {
            str += '<input id="' + uuid + ids + '" type="checkbox" ' +
              'data-show="' + data[i].open + '" value="' + data[i].id + '"/>'
          }
          str += '<label class="label" for="' +
            uuid + ids + '"/><i class="' + data[i].ico + '"/><a href="#">' + data[i].name + '</a>';
          if (data[i].children && data[i].children != '') {
            str += createTree(data[i].children);
          }
          str += '</li>';
        };
        str += '</ul>';
        return str;
      };

      //通过ID选中
      if (arrs.constructor == Array) { //判断是否为数组
        setCheckedNodes(data, arrs);
      }

      //把树放到容器
      $(tree).html(createTree(data));

      //初始化parent的状态
      $.each($("input:checkbox"), function () {
        checkParent(this)
      });

      //是否展开
      $.each($("input"), function () {
        if (this.getAttribute('data-show') == 'false') {
          $(this).parent().find("ul").hide();
          $(this).prev()[0].setAttribute("style", 'transform:rotate(-90deg)');

        } else {
          $(this).parent().find("ul").show();
          if ($(this).parent().find("ul").length > 0) {
            $(this).prev()[0].setAttribute("style", 'transform:rotate(0deg)');
          } else {
            $(this).prev()[0].setAttribute("style", 'opacity: 0;');
          }
        }
      });
    },
  })

  //添加的$.xxx() 或者$SG.xxx()
  $.extend({
    getCheckedNodes() { //获取选中id集合
      var arr = []
      $.each($('input:checkbox:checked'), function () {
        let temp = $(this).val();
        if (temp != "" && temp != "undefined") {
          arr.push($(this).val())
        }
      });
      return arr;
    }
  });

  global.$SG = global.$ = $;

})(window)
